import { Activity, TrendingUp, DollarSign, Server, Globe, Zap, Clock } from 'lucide-react';
import { useLanguage } from '@kernelproxy/i18n';

const Overview = () => {
  const { language } = useLanguage();

  const stats = [
    {
      title: language === 'zh-CN' ? '总流量使用' : 'Total Traffic Used',
      value: '850 GB',
      change: '+12.5%',
      icon: Activity,
      color: 'text-blue-600 dark:text-blue-400',
      bgColor: 'bg-blue-100 dark:bg-blue-900/30',
    },
    {
      title: language === 'zh-CN' ? '账户余额' : 'Account Balance',
      value: '$1,250.00',
      change: '-$85.00',
      icon: DollarSign,
      color: 'text-green-600 dark:text-green-400',
      bgColor: 'bg-green-100 dark:bg-green-900/30',
    },
    {
      title: language === 'zh-CN' ? '活动代理' : 'Active Proxies',
      value: '156',
      change: '+8',
      icon: Server,
      color: 'text-purple-600 dark:text-purple-400',
      bgColor: 'bg-purple-100 dark:bg-purple-900/30',
    },
    {
      title: language === 'zh-CN' ? '成功率' : 'Success Rate',
      value: '99.8%',
      change: '+0.3%',
      icon: TrendingUp,
      color: 'text-emerald-600 dark:text-emerald-400',
      bgColor: 'bg-emerald-100 dark:bg-emerald-900/30',
    },
  ];

  const services = [
    {
      name: language === 'zh-CN' ? '动态住宅代理' : 'Dynamic Residential',
      status: 'online',
      usage: '420 GB',
      requests: '125.3K',
      successRate: '99.9%',
    },
    {
      name: language === 'zh-CN' ? '静态住宅代理' : 'Static Residential',
      status: 'online',
      usage: '280 GB',
      requests: '85.6K',
      successRate: '99.7%',
    },
    {
      name: language === 'zh-CN' ? '数据中心IPv6' : 'Datacenter IPv6',
      status: 'online',
      usage: '150 GB',
      requests: '45.2K',
      successRate: '99.8%',
    },
  ];

  const recentActivity = [
    {
      type: 'request',
      message: language === 'zh-CN' ? '成功请求 - 美国节点' : 'Successful Request - US Node',
      time: '2 min ago',
      status: 'success',
    },
    {
      type: 'purchase',
      message: language === 'zh-CN' ? '购买静态IP - 德国' : 'Static IP Purchase - Germany',
      time: '15 min ago',
      status: 'success',
    },
    {
      type: 'warning',
      message: language === 'zh-CN' ? '流量即将用完 - 动态代理' : 'Traffic Low - Dynamic Proxy',
      time: '1 hour ago',
      status: 'warning',
    },
    {
      type: 'request',
      message: language === 'zh-CN' ? '成功请求 - 日本节点' : 'Successful Request - Japan Node',
      time: '2 hours ago',
      status: 'success',
    },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          {language === 'zh-CN' ? '概览' : 'Overview'}
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-2">
          {language === 'zh-CN' ? '查看您的代理服务概览和使用统计' : 'View your proxy services overview and usage statistics'}
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <div
            key={index}
            className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"
          >
            <div className="flex items-center justify-between">
              <div className={`p-3 rounded-lg ${stat.bgColor}`}>
                <stat.icon className={`w-6 h-6 ${stat.color}`} />
              </div>
              <span className={`text-sm font-medium ${stat.change.startsWith('+') ? 'text-green-600' : 'text-red-600'}`}>
                {stat.change}
              </span>
            </div>
            <h3 className="text-gray-600 dark:text-gray-400 text-sm font-medium mt-4">
              {stat.title}
            </h3>
            <p className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
              {stat.value}
            </p>
          </div>
        ))}
      </div>

      {/* Service Status */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
          {language === 'zh-CN' ? '服务状态' : 'Service Status'}
        </h2>
        <div className="space-y-4">
          {services.map((service, index) => (
            <div
              key={index}
              className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg"
            >
              <div className="flex items-center space-x-4">
                <div className={`w-3 h-3 rounded-full ${service.status === 'online' ? 'bg-green-500' : 'bg-red-500'} animate-pulse`} />
                <div>
                  <h3 className="font-medium text-gray-900 dark:text-white">
                    {service.name}
                  </h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {language === 'zh-CN' ? '在线运行' : 'Online'}
                  </p>
                </div>
              </div>
              <div className="flex items-center space-x-8 text-sm">
                <div>
                  <p className="text-gray-500 dark:text-gray-400">
                    {language === 'zh-CN' ? '使用量' : 'Usage'}
                  </p>
                  <p className="font-medium text-gray-900 dark:text-white">
                    {service.usage}
                  </p>
                </div>
                <div>
                  <p className="text-gray-500 dark:text-gray-400">
                    {language === 'zh-CN' ? '请求数' : 'Requests'}
                  </p>
                  <p className="font-medium text-gray-900 dark:text-white">
                    {service.requests}
                  </p>
                </div>
                <div>
                  <p className="text-gray-500 dark:text-gray-400">
                    {language === 'zh-CN' ? '成功率' : 'Success Rate'}
                  </p>
                  <p className="font-medium text-green-600 dark:text-green-400">
                    {service.successRate}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Two Column Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Real-time Traffic */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
            {language === 'zh-CN' ? '实时流量监控' : 'Real-time Traffic'}
          </h2>
          <div className="space-y-4">
            {[
              { label: language === 'zh-CN' ? '当前请求/秒' : 'Requests/sec', value: '245', icon: Zap },
              { label: language === 'zh-CN' ? '平均响应时间' : 'Avg Response', value: '128ms', icon: Clock },
              { label: language === 'zh-CN' ? '活动会话' : 'Active Sessions', value: '1,234', icon: Globe },
            ].map((metric, index) => (
              <div key={index} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <metric.icon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                  <span className="text-gray-700 dark:text-gray-300">{metric.label}</span>
                </div>
                <span className="font-bold text-gray-900 dark:text-white">{metric.value}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Recent Activity */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
            {language === 'zh-CN' ? '最近活动' : 'Recent Activity'}
          </h2>
          <div className="space-y-3">
            {recentActivity.map((activity, index) => (
              <div key={index} className="flex items-start space-x-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 rounded-lg transition-colors">
                <div className={`mt-1 w-2 h-2 rounded-full ${
                  activity.status === 'success' ? 'bg-green-500' : 
                  activity.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'
                }`} />
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-gray-900 dark:text-white">
                    {activity.message}
                  </p>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {activity.time}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Overview;
